import React, { Fragment } from 'react';
import { Button, Drawer, Table, Space, Popconfirm, message } from 'antd';
import AddUser1 from './AddUser1';
import EditUser1 from './EditUser1';

class Demo5 extends React.PureComponent {
  constructor(props) {
    super(props);
    console.log("constructor");
    this.state={
      visible:false,
      editVisible:false,
      tableData:[],
      currentuser:{},
    }
  }

  refreshData=()=>{
    console.log("execute refreshData");
    const url="http://localhost:8080/user/list"
    fetch(url,
      {
        method:'GET',
        headers: {
          Authorization: localStorage.getItem('Authorization'),
        },
      })
      .then((response) => response.json())
      .then((res)=>{
        const{data}=res;
        console.log(data);
        this.setState({tableData:data});
      });
  }

  deleteConfirm=(record)=>{
    const url="http://localhost:8080/user/"+record.userId;
    fetch(url,
      {
        method:'DELETE',
        headers: {
          "Content-Type":'application/json',
          Authorization: localStorage.getItem('Authorization'),
        },
      })
      .then((response)=>response.json())
      .then((res)=>{
        console.log(res);
        const {code=0,msg=""}=res;
        if (code==0){
          this.refreshData();
          message.info(msg);
        }
      })
  }

  deleteCancel=()=>{
  }

  componentDidMount() {
    console.log("componentDidMount");
    this.refreshData();
  }

  columns = [
    {
      title: '序号',
      key: 'index',
      render: (_, record, index) => {
        return index+1;
      },
    },
    {
      title: '姓名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => {
        console.log(record);
        const popDeleteMsg = "是否删除"+record.username;
        return (
          <Space size="middle">
            <a onClick={()=>this.handleEdit(record)}>编辑</a>
            <Popconfirm
              title={popDeleteMsg}
              onConfirm={()=>this.deleteConfirm(record)}
              onCancel={this.deleteCancel}
              okText="Yes"
              cancelText="No"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>);
      }
      ,
    },
  ];

  handleEdit=(data)=>{
    this.setState({
      editVisible:true,
      currentuser:data,
    })
  }

  handleOpenDraw=()=>{
    this.setState({visible:true})
  }

  onClose=()=>{
    this.setState({visible:false})
  }

  onEditDrawerClose=()=>{
    this.setState({editVisible:false})
  }

  render() {
    console.log("render");
    return (
      <Fragment>
        <Button type="primary" onClick={this.handleOpenDraw}>
          新增
        </Button>
        <Table dataSource={this.state.tableData} columns={this.columns} />
        <Drawer
          title="新增"
          placement="right"
          onClose={this.onClose}
          open={this.state.visible}
        >
          <AddUser1
            refresh={this.refreshData}
            closeDrawer={this.onClose}
          />
        </Drawer>
        <Drawer
          title="编辑"
          placement="left"
          onClose={this.onEditDrawerClose}
          open={this.state.editVisible}
        >
          <EditUser1
            refresh={this.refreshData}
            closeDrawer={this.onEditDrawerClose}
            currentData={this.state.currentuser}
          />
        </Drawer>
      </Fragment>
    );
  }
}

export default Demo5;
